// 列表切歌
// 索引控制模块
;(function(root) {
    
    function listControl(data, wrap) {
        const list = document.createElement('div'),
            dl = document.createElement('dl'),
            dt = document.createElement('dt'),
            close = document.createElement('div'),
            musicList = [];
        
        list.className = 'list'
        dt.innerHTML = '播放列表'
        close.className = 'close'
        close.innerHTML = '关闭'
        dl.appendChild(dt)
        data.forEach((item, index) => {
            const dd = document.createElement('dd')
            dd.innerHTML = item.name
            dd.addEventListener("touchend",function (params) {
                changeSelect(index)
            })
            dl.appendChild(dd)
            musicList.push(dd)
        });
            
        list.appendChild(dl)
        list.appendChild(close)
        wrap.appendChild(list)

        let disy  = list.offsetHeight
        list.style.transform = `translateY(${disy}px)`;

        // 显示
        function sideUp() {
            list.style.transition = '.2s'
            list.style.transform = `translateY(0px)`;
        }
        // 隐藏
        function sideDown() {
            list.style.transition = '.2s'
            list.style.transform = `translateY(${disy}px)`;
        }
        // 关闭
        close.addEventListener('touchend',sideDown)
        // 切换选中元素
        changeSelect(0)
        function changeSelect(index) {
            for (let i = 0; i < musicList.length; i++) {
                const element = musicList[i];
                element.className = ''
            }
            musicList[index].className = 'active'
        }

        return { 
            sideUp,sideDown,changeSelect,
            dom: list,
            musicList
        }
    }

    root.listControl = listControl
})(window.player || (window.player = {}))